<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;

        }
    </style>
</head>

<body>
    <div></div>

    <script>
        //获取元素
        var box = document.querySelector('div')
        console.log(box);
        //准备事件 按下 移动 抬起
        //移动事件要在 按下以后注册 抬起以后取消



        //移动处理函数
        function moveHandler(event) {
            //移动业务逻辑


            //屏幕的宽度
            var window_width = document.documentElement.clientWidth
            //盒子的宽度
            var box_width = box.offsetWidth
            //屏幕的高度
            var window_height = document.documentElement.clientHeight
            //盒子的高度
            var box_height = box.offsetHeight



            //1.获取坐标点
            event = event || window.event
            // console.log(event);
            var x = event.clientX - 100 //div宽高是200 所以-100保证鼠标在div中间
            var y = event.clientY - 100
            // console.log(x, y);

            //边界值判断

            //吸附效果 判断值+ or -一个固定值
            //先判断左上 就是0 0
            if (x < 0) {
                x = 0
            }
            if (y < 0) {
                y = 0
            }
            //判断右边 右上 //到右边 移动的距离+自己的宽度===屏幕宽 //移动的距离=屏幕宽-自己的宽度 //当移动距离>=屏幕宽-自己的宽 就出界了 
            if (x >= window_width - box_width) {
                x = window_width - box_width
            }

            //判断下边
            if (y >= window_height - box_height) {
                y = window_height - box_height
            }






            //这里的this指的是box元素
            //重新给left和top赋值
            this.style.left = x + 'px'
            this.style.top = y + 'px'
        }


        //按下事件
        box.addEventListener('mousedown', function () {
            //按下添加移动事件
            box.addEventListener('mousemove', moveHandler)

        })
        //抬起事件
        box.addEventListener('mouseup', function () {
            //抬起移除移动事件
            box.removeEventListener('mousemove', moveHandler)
        })
    </script>

</body>

</html>